<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>用户管理 - 用户编辑</title>
		<meta name="description" content="overview &amp; stats" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="${request.contextPath}/static/assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="${request.contextPath}/static/assets/font-awesome/4.2.0/css/font-awesome.min.css" />
		<!-- page specific plugin styles -->
		<link rel="stylesheet" href="${request.contextPath}/static/assets/css/jquery-ui.custom.min.css" />
		<link rel="stylesheet" href="${request.contextPath}/static/assets/css/jquery.gritter.min.css" />
		<!-- text fonts -->
		<link rel="stylesheet" href="${request.contextPath}/static/assets/fonts/fonts.googleapis.com.css" />
		<!-- BootstrapValidator -->
		<link rel="stylesheet" href="${request.contextPath}/static/assets/css/bootstrapValidator.min.css" />
		<!-- ace styles -->
		<link rel="stylesheet" href="${request.contextPath}/static/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
		<!-- ace settings handler -->
		<script src="${request.contextPath}/static/assets/js/ace-extra.min.js"></script>
		<link rel="stylesheet" href="${request.contextPath}/static/assets/css/zTreeStyle.css" type="text/css">
		<!-- basic scripts -->
		<script src="${request.contextPath}/static/assets/js/jquery.2.1.1.min.js"></script>
		<script src="${request.contextPath}/static/assets/js/bootstrap.min.js"></script>
		<script src="${request.contextPath}/static/assets/js/jquery-ui.custom.min.js"></script>
		<script src="${request.contextPath}/static/assets/js/jquery.ui.touch-punch.min.js"></script>
		<script src="${request.contextPath}/static/assets/js/bootbox.min.js"></script>
		<script src="${request.contextPath}/static/assets/js/jquery.gritter.min.js"></script>
		<script src="${request.contextPath}/static/assets/js/spin.min.js"></script>
		<!-- ace scripts -->
		<script src="${request.contextPath}/static/assets/js/ace-elements.min.js"></script>
		<script src="${request.contextPath}/static/assets/js/ace.min.js"></script>
		<!-- validator scripts -->
		<script src="${request.contextPath}/static/assets/js/bootstrapValidator.min.js"></script>
		<!-- user scripts -->
		<script src="${request.contextPath}/static/assets/js/user/base.js"></script>

	</head>

	<body class="skin-2" style="background-color: #FFF;">
		<div class="page-content">
			<div class="page-header">
				<h1>
					<!-- 角色管理
					<small>
						<i class="ace-icon fa fa-angle-double-right"></i> -->
						<#if role?? && role.id??>
						编辑角色
						<#else>
						新增角色
						</#if>
					<!-- </small> -->
				</h1>
			</div>
			<div class="row">
				<div class="col-xs-12">
					<form id="roleForm" class="form-horizontal" role="form" action="${request.contextPath}/saveRole" method="POST">
						<input type="hidden" id="_csrf" name="${_csrf.parameterName}" value="${_csrf.token}"/>
						<#if message??>
						<input type="hidden" id="message" name="message" value="${message}">
						</#if>
						<#if role?? && role.id??>
						<input type="hidden" id="id" name="id" value="${role.id}">
						</#if>
						<input type="hidden" id="menuIds" name="menuIds" value="${role.menuIds!}">
						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 角色名称 </label>
							<div class="col-sm-9">
								<input type="text" id="name" name="name" placeholder="角色名称" value="${role.name!}" <#if role?? && role.id??>readonly='readonly'</#if> class="col-xs-10 col-sm-5">
							</div>
						</div>
						<div class="space-4"></div>
						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 英文名称 </label>
							<div class="col-sm-9">
								<input type="text" id="englishName" name="englishName" placeholder="英文名称" value="${role.englishName!}" <#if role?? && role.id??>readonly='readonly'</#if> class="col-xs-10 col-sm-5">
							</div>
						</div>
						<div class="space-4"></div>
						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 备注 </label>
							<div class="col-sm-9">
								<input type="text" id="remark" name="remark" placeholder="角色备注" value="${role.remark!}" class="col-xs-10 col-sm-5">
							</div>
						</div>
						<div class="space-4"></div>
						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 菜单权限 </label>
							<div class="col-sm-9">
								<ul id="menusTree" class="ztree"></ul>
							</div>
						</div>
						<div class="clearfix form-actions">
							<div class="col-md-offset-4 col-md-8">
								<button id="submitBtn" class="btn btn-info" type="button">
									<i class="ace-icon fa fa-check bigger-110"></i>
									保存
								</button>
							</div>
						</div>
					</form>
				</div><!-- /.col -->
			</div><!-- /.row -->
		</div>

		
		<script type="text/javascript" src="${request.contextPath}/static/assets/js/jquery.ztree.all.min.js"></script>

		<!-- inline scripts related to this page -->
		<script type="text/javascript">
			jQuery(function($) {
				var message = $('#message').val();
				if(message)
				{
					showMsg(message);
				}
				var syncCheckedIds = function() {
					var zTree = $.fn.zTree.getZTreeObj("menusTree");
					var nodes = zTree.getCheckedNodes(true);
					var nodeIds = "";
					$.each(nodes, function(index, node) {
						if(isEmpty(nodeIds))
							nodeIds = nodeIds + node.id;
						else
							nodeIds = nodeIds + ',' + node.id;
					});
					$("#menuIds").val(nodeIds);
				};
				var setting = {
					check: {
						enable: true,
						chkboxType: { "Y" : "ps", "N" : "ps" }
					},
					data: {
						simpleData: {
							enable: true
						}
					},
					callback: {
						onCheck: syncCheckedIds
					}
				};
				var zNodes = eval('${menus!}');
				$.fn.zTree.init($("#menusTree"), setting, zNodes);
				
				$('#submitBtn').on('click', function(){
					var name = $("#name").val();
					var ename = $("#englishName").val();
					//数据合法性校验
					if(isEmpty(name)) {
						$("#name").focus();
						showMsg("角色名称不能为空！");
					} else if(isEmpty(ename)) {
						$("#englishName").focus();
						showMsg("英文名称不能为空！");
					} else {
						$("#roleForm").submit();
					}
				});
			})
		</script>
	</body>
</html>